<!DOCTYPE html>
<html>
	<!--创建钱包2-->
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登陆</title>
		<link rel="stylesheet" type="text/css" href="skin/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="skin/css/animate.css"/>
		<style type="text/css">
			#app{
				width: 100%;
				height: 100%;
				padding: 0;
			}
			.hea{
				position: relative;
				height: 160px;
				background: url(skin/img/cre-wal-bg.png);
				background-size: 100% 100%;
			}
			.hea > h3{
				padding:60px 0;
				color: white;
				text-align: center;
				font-size: 23px;
			}
			.hea>.logo{
				position: absolute;
				bottom: -40px;
				width: 100%;
				height: 80px;
				background: url(skin/img/logo.png) no-repeat center center;
				background-size: 80px 80px;
			}
			.zu-wrap{
				padding:50px 50px 0;
			}
			.zu-wrap>h1{
				font-size:23px ;
				color: RGBA(53, 115, 250, .7);
				text-align: center;
				padding:10px 0 20px;
			}
			.zu-wrap>textarea{
				padding:10px 5px;
				width: 100%;
				height: 80px;
				outline: none;
			}
			.zu-wrap>textarea:focus{
				box-shadow: 0 0 10px #0781EE;
				border: none;
			}
			#wallet-wrap{
				padding: 0 50px;
				margin-top: 10px;
			}
			#wallet-wrap >p>input{
				width: 100%;
				height: 50px;
				border-bottom: 1px solid #333333;
				color: #333333;
				opacity: .5;
			}
			#wallet-wrap .agree{
				display: flex;
				padding: 15px 0;
				opacity: .5;
			}
			#wallet-wrap .agree > p:first-of-type{
				height: 20px;
				width:20px;
				margin-right: 8px;
				
			}
			#wallet-wrap .agree > p.chan-no{
				background: url(skin/img/chan-no.png) no-repeat center center;
				background-size:100% 100% ;
			}
			#wallet-wrap .agree > p.chan-yes{
				background: url(skin/img/chan-yes.png) no-repeat center center;
				background-size:100% 100% ;
			}
			#wallet-wrap .agree > p:last-of-type{
				line-height: 20px;
			}
			#wallet-wrap >button{
				display: block;
				width: 100%;
				height: 30px;
				margin: 10px 0;
				text-align: center;
				border-radius: 20px;
				border: none;
				outline: none;
			}
			#wallet-wrap >button:first-of-type{
				margin-top:30px;
				background: #3573FA;
				color: white;
			}
			#wallet-wrap >button:last-of-type{
				background: transparent;
				color:#3573FA;
			}
			
			#mask{
				display: flex;
				justify-content: center;
				align-items: center;
				position: absolute;
				top:0;
				bottom:0;
				left:0;
				right:0;
				z-index: 1;
				background: rgba(0,0,0,.5);
			}
			#mask>.ma-con{
				width: 60%;
				background: white;
				border-radius: 10px;
			}
			#mask>.ma-con>p{
				padding: 40px 25px;
				text-align: center;
				font-size: 15px;
				opacity: .6;
			}
			#mask>.ma-con>button{
				width: 100%;
				height: 35px;
				background: #3573FA;
				border: none;
				outline: none;
				color: white;
				border-radius: 0 0 10px 10px;
			}
			.animated{
				animation-duration: .4s;
				animation-fill-mode:both;
			}
		</style>
	</head>
	
	
	<body>
		<div id="app">
			<transition
				enter-active-class='animated zoomIn'	
				leave-active-class='animated zoomOut'
			>
				<div id="mask" v-if='offMask'>
					<div class='ma-con'>
						<p>恭喜您，导入成功</p>
						<button @click='next'>知道了</button>
					</div>
				</div>
			</transition>
			<div class='hea'>
				<h3>导入钱包</h3>
				<div class='logo'></div>
			</div>
			<div class="zu-wrap">
				<h1>助记词</h1>
				<textarea placeholder="助记词，按空格分割" v-model='inputData.con'></textarea>
			</div>
			<div id="wallet-wrap">
				<p>
					<input type="password" placeholder="密码" v-model='inputData.pas1' />
				</p>
				<p>
					<input type="password" placeholder="重复密码" v-model='inputData.pas2' />
				</p>
				<p>
					<input type="text" placeholder="密码提示信息（可不填）" v-model='inputData.pasNotice' />
				</p>
				<div class='agree' @click="checked=!checked">
					<transition
						enter-active-class='animated bounceIn'
					>
						<p class='chan-no' v-if='!checked'></p>
					</transition>
					<transition
						enter-active-class='animated bounceIn'
					>
						<p class='chan-yes' v-if='checked'></p>
					</transition>
					<p>我已经仔细阅读并同意  <span style='color:#3573FA'>服务及隐私条款</span></p>
				</div>
				<button @click='impMall'>导入钱包</button>
				<button @click='whatZu'>什么是助记词？</button>

			</div>
		</div>
		<script src="skin/js/back.js" type="text/javascript" charset="utf-8"></script>
		<script src='skin/js/jquery-3.3.1.min.js'></script>
		<script src="skin/js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="skin/js/comm.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var app=new Vue({
				el:'#app',
				data:{
					offMask:false,
					checked:false,//默认没阅读同意
					inputData:{
						con:'',//助记词
						pas1:'',//密码
						pas2:'',//密码2
						pasNotice:'',//密码提示信息
					}
				},
				methods:{
					//执行导入钱包
					impMall:function(){
						// 删除
						this.offMask=true;
						return ;
						// 删除

						if(!this.inputData.con){
							toast('请输入助记词');
							return ;
						}
						if(!this.inputData.pas1){
							toast('请输入密码');
							return ;
						}
						if(this.inputData.pas1!=this.inputData.pas2){
							toast('两次密码不一致');
							return ;
						}
						if(!this.checked){
							toast('同意服务及隐私条款才能进行导入钱包');
							return ;
						}
						this.offMask=true;
					},
					
					//什么是助记词点击
					whatZu:function(){
						plus.webview.open('what-zujici.html','whatZujici',{},'slide-in-right');
					},
					
					//导入成功点击知道了
					next:function(){
						plus.webview.open('home.html','home',{},'slide-in-right');
						//要关闭页面栈所有页面,不然会影响home页面的返回
						var web=plus.webview.all(); 
						for(var i=0;i<web.length-1;i++){
							web[i].close();
						}
					}
				}
			});
		</script>
	</body>
</html>


